<template>
  <section class="container horizontal">
    <aside class="aside">
      <el-menu
        mode="vertical"
        :collapse="collapse"
        :router="true"
        :unique-opened="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <template v-for="nav1 in navConfig">
          <sub-menu v-if="nav1.children && nav1.children.length !== 0" :key="nav1.path"
                    :nav="nav1"></sub-menu>
          <el-menu-item v-else :key="nav1.path" :index="nav1.path">{{nav1.label}}</el-menu-item>
        </template>
      </el-menu>
    </aside>
    <section class="container vertical">
      <header class="header">
        <i class=""></i>
      </header>
      <main class="main">
        <div class="main-container">
          <router-view/>
        </div>
      </main>
    </section>
  </section>
</template>

<script>
/**
 * @Author: lifuzhao
 * @Date: 2019-08-19
 * @Project: shop_cms
 */
import { mapState } from 'vuex';
import './index.less';
import navConfig from './nav.config';

export default {
  name: 'default',
  data() {
    return {
      navConfig,
    };
  },
  computed: {
    ...mapState([
      'collapse',
    ]),
  },
};
</script>
